<template>
    <el-container slot="container" class="list-container">
        <el-main class="main">
          <div v-for="item in friendsList" :key="item.msgSeq" class="talk-item pointer" :class="{ active: msgSeq == item.msgSeq }" @click="clickTab(item.msgSeq,item.employeeCode,item.friendsCode)" >
            <div class="avatar-box">
              <span v-show="!item.friendsAvatar">
                {{
                  (item.friendsNickName ? item.friendsNickName : item.friendsName).substr(0, 1)
                }}
              </span>
              <img v-show="item.friendsAvatar" :src="item.friendsAvatar" :onerror="$store.state.detaultAvatar"/>
            </div>
            <div class="card-box">
              <div class="title">
                <div class="card-name">
                  <p class="nickname">{{ item.friendsNickName ? item.friendsNickName : item.friendsName }}</p>
                </div>
                <div class="card-time">
                  <u-time :value="item.msgTime" />
                </div>
              </div>
              <div class="content">
                <template  v-if="item.msgTip">
                  <span>{{ item.msgTip }}</span>
                </template>
                <template v-else>
                  <span>{{ item.lastContent }}</span>
                </template>
              </div>
            </div>
          </div>
        </el-main>
    </el-container>
</template>

<script>
import { getCacheIndexName } from '@/utils/localStorage'
import UTime from './utime.vue'
export default {
  name: 'MessagePage',
  components: {
    UTime
  },
  props: {
    friendsList: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      msgSeq: '1'
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    clickTab(msgSeq, empCode, friendsCode) {
      this.msgSeq = msgSeq
      this.$nextTick(() => {
        this.$emit('clickTab', empCode, friendsCode)
      })
    }
  }
}
</script>

<style  lang="scss">
::v-deep.el-scrollbar__wrap {
  overflow-x: hidden;
}
.list-container {
  overflow: hidden;
  position: relative;
  transition: width 0.3s;
  .full-height {
    margin-top: 10px;
    width: 100%;
    height: 430px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
}
.main {
  overflow-x: hidden;
  overflow-y: auto;
  height:450px;
  border-radius: 10px;
  margin-top: 5px;;
  padding: 10px 5px 10px 5px;

  .empty-data {
    text-align: center;
    padding-top: 40px;
    color: #ccc;
    overflow: hidden;
  }
  .main-menu {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 10px 6px 10px;
    align-items: center;
    user-select: none;
    .title {
      font-size: 12px;
      font-weight: 600;
      color: #1f2329;
    }

    .icon {
      cursor: pointer;
    }
  }
  .talk-item {
    overflow: hidden;
    margin: 5px 5px 5px 5px;
    padding: 20px 5px 20px 5px;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 3px solid transparent;
    border-radius: 5px;
    transition: 0.2s ease-in;
    .avatar-box {
      height: 35px;
      width: 35px;
      flex-shrink: 0;
      background-color: #508afe;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: white;
      user-select: none;
      transition: ease 1s;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 3px;
      }
      .top-mask {
        width: 100%;
        height: 100%;
        background-color: rgba(22, 25, 29, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        display: none;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
      &:hover .top-mask {
        display: flex;
      }
    }
    .card-box {
      height: 40px;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex: 1 1;
      margin-left: 10px;
      overflow: hidden;
      .title {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        .card-name {
          color: #1f2329;
          font-size: 14px;
          line-height: 20px;
          flex: 1 1;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          overflow: hidden;
          .nickname {
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 3px;
          }
          .top {
            color: #dc9b04 !important;
            background-color: #faf1d1 !important;
          }
          .group {
            color: #3370ff !important;
            background-color: #e1eaff !important;
            font-size: 13px;
          }
          .disturb {
            color: #98999c !important;
            background-color: #ecedf1 !important;
            i {
              font-size: 12px;
            }
          }
        }
      }
      .card-time {
        color: #8f959e;
        font-size: 12px;
        margin-left: 10px;
        user-select: none;
      }
      .content {
        font-size: 11px;
        line-height: 18px;
        color: #8f959e;
        margin-top: 3px;
        font-weight: 300;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span:first-child {
          margin-right: 5px;
        }
        .online-color {
          color: #4aa71c;
          font-weight: 300;
        }
        .draft-color {
          color: red;
          font-weight: 300;
        }
      }
    }
    &:hover {
      background-color: #eff0f1;
    }
    &.active {
      .avatar-box {
        border-radius: 5px;
      }
      background-color: #d2ecf8;
    }
  }
}

</style>
